<script setup>
import {reactive, ref} from 'vue'
import draggableTable5 from './draggableDrawer.vue'


const instance = getCurrentInstance()
const columnsDetail = reactive([
  {
    title: '#', key: 'rowIndex', width: 30, align: 'center', fixed: 'left',
    customRender: function({text, record, index}) {
      return parseInt(index) + 1
    }
  },{
    title: '帐单日期', align: 'center', width: 100, sorter: true, dataIndex: 'bill_date',
  },{
    title: '贸易方', align: 'center', width: 80, dataIndex: 'id_trade_partner',
    slots: { customRender: 'tradePartner' }
  },{
    title: '帐单类型', align: 'center', width: 40, dataIndex: 'bill_type',
  },{
    title: '帐单号', align: 'center', width: 120, dataIndex: 'bill_no',
  },{
    title: '航班号', align: 'center', width: 70, dataIndex: 'flight_no',
  },{
    title: '始发港', align: 'center', width: 60, dataIndex: 'departure_port',
    customRender: function({text}) {
      return text || 'HGH'
    }
  },{
    title: '目的港', align: 'center', width: 60, dataIndex: 'destination_port',
  },{
    title: '件数', align: 'center', width: 70, dataIndex: 'articles',
  },{
    title: '重量', align: 'center', width: 70, dataIndex: 'weight',
  },{
    title: '计费重量', align: 'center', width: 70, dataIndex: 'weight_for_fee',
  },{
    title: '单价', align: 'center', width: 60, dataIndex: 'unit_price',
  },{
    title: '总金额', align: 'right', width: 75, sorter: true, dataIndex: 'total_amount',
    slots: { customRender: 'total_amount' }
  },{
    title: '入帐公司', align: 'center', width: 120, dataIndex: 'id_company',
    slots: { customRender: 'company' }
  },{
    title: '状态', align: 'center', width: 60, dataIndex: 'status', //用自动生成的customRender
    // customRender: function({text}) {
    //   return checkBillStore.dictObj.status[text] || text
    // }
  },{
    title: '备注', align: 'center', width: 120, dataIndex: 'memo',
  },{
    title: '操作', align: 'center', dataIndex: 'action', width: 120, fixed: 'right',
    slots: { customRender: 'action' }
  }
])
// instance.ctx.columnsDetail = columnsDetail
const visible = ref(true)
const onDataUpdate = (data) => {
  //props.currentConfigData = data
  console.error("onDataUpdate", JSON.stringify(data))
}
const onClose = () => {
  visible.value = false
}
const columnConfigKey = ref("checkingBillDetail")
</script>

<template>
  <button @click="visible = true">打开配置抽屉</button>
  <div>
    <draggableTable5   :keyId="columnConfigKey" :currentConfigData="columnsDetail" :originalConfigData="columnsDetail"
                       :visible="visible" @update:data="onDataUpdate" @close="onClose" >
    </draggableTable5>
  </div>
</template>

<style scoped lang="scss">

</style>